<template>
  <div class="menu-bar-root-container">
    <div class="menu-bar-root-left">
      <BackButton />
      <PresetLoader />
      <el-button type="primary" link @click="handleAddTimeSlot">
        <span>添加时段</span>
        <el-icon><i-ep-plus /></el-icon>
      </el-button>
    </div>
    <div class="menu-bar-root-right">
      <NextButton :beforeNext="generateTimeSlots" />
    </div>
  </div>
</template>

<script setup>
import BackButton from "../components/BackButton";
import NextButton from "../components/NextButton";
import PresetLoader from "./PresetLoader";
import generateTimeSlots from "./generateTimeSlots";

const emits = defineEmits(["addTimeSlot"]);
const handleAddTimeSlot = () => {
  emits("addTimeSlot");
};
</script>

<style scoped>
@import "../styles/MenuBar.css";
</style>
